import React from 'react'
import './HeaderNav.scss'
class HeaderNav extends React.Component{

    constructor(props){
        super(props);
        this.state={
            activeFlg:4
        };
        this.clickhandle = this.clickhandle.bind(this);
    }
    clickhandle(flg){
        this.setState({
            activeFlg:flg
        })
    }
    // this.props.filerhandle('hc')}} 
    // this.props.filerhandle('hcj')}}
    // this.props.filerhandle('jq')}} 
    // this.props.filerhandle('rv')}} 
    // this.props.filerhandle('All')}}
    render(){
        return(
            <div className="header-container">
                <div className='w'>
                    <span onClick={()=>{this.clickhandle(0);this.props.filerhandle('0')}} className={`btn-tab ${this.state.activeFlg===0?'active':''}`}>html+css</span>
                    <span onClick={()=>{this.clickhandle(1);this.props.filerhandle('1')}} className={`btn-tab ${this.state.activeFlg===1?'active':''}`}>html+css+js</span>
                    <span onClick={()=>{this.clickhandle(2);this.props.filerhandle('2')}} className={`btn-tab ${this.state.activeFlg===2?'active':''}`}>jquery</span>
                    <span onClick={()=>{this.clickhandle(3);this.props.filerhandle('3')}} className={`btn-tab ${this.state.activeFlg===3?'active':''}`}>react/vue</span>
                    <span onClick={()=>{this.clickhandle(4);this.props.filerhandle('4')}} className={`btn-tab ${this.state.activeFlg===4?'active':''}`}>All</span>
                </div>
            </div>
        )
    }
}
export default HeaderNav